<template>
  <div class=" width100 ">

    <div>
      <img width="100%" src="../static/10026.jpg" alt="">
    </div>
    <div class="main_padd">
      <div class="text-left">123456</div>
      <!-- <div class="container"> -->
      <div class="row justify-content-between align-items-center no-gutters new_last">
        <div class="   col-6 col-md-2">
          <div class="backyellow new_width">123</div>
        </div>
        <div class="   col-6 col-md-2">
          <div class="backyellow new_width">123</div>
        </div>
        <div class="   col-6 col-md-2">
          <div class="backyellow new_width">123</div>
        </div>
        <div class="   col-6 col-md-2">
          <div class="backyellow new_width">123</div>
        </div>
        <div class="   col-6 col-md-2">
          <div class="backyellow new_width">123</div>
        </div>
        <div class="   col-6 col-md-2">
          <div class="backyellow new_width">123</div>
        </div>
      </div>
      <!-- </div> -->
      <div class="text-right">123456</div>
    </div>

    <div class="main_padd ">
      <div class="boxshadow row justify-content-around align-items-center mian_selec ">
        <div class=" textcontent border_line  col-4 col-md-2  text_black indexhovers1">
          <div class="main_lest">
            <div><img class="iconconter" src="../static/indexicon/indexicon12.png" alt=""></div>
            <div class="main_size">广告配音</div>
          </div>
        </div>

        <div class=" textcontent border_line  col-4 col-md-2 text_black indexhovers2">
          <div class="main_lest">
            <div><img class="iconconter" src="../static/indexicon/indexicon22.png" alt=""></div>
            <div>宣传片配音</div>
          </div>

        </div>
        <div class=" textcontent border_line  col-4 col-md-2 text_black indexhovers3">
          <div class="main_lest">
            <div><img class="iconconter" src="../static/indexicon/indexicon33.png" alt=""></div>
            <div>sadsak</div>
          </div>

        </div>
        <div class=" textcontent border_line  col-4 col-md-2 text_black indexhovers4">
          <div class="main_lest">
            <div><img class="iconconter" src="../static/indexicon/indexicon44.png" alt=""></div>
            <div>sadsak</div>
          </div>

        </div>
        <div class=" textcontent border_line  col-4 col-md-2 text_black indexhovers5">
          <div class="main_lest">
            <div><img class="iconconter" src="../static/indexicon/indexicon55.png" alt=""></div>
            <div>sadsak</div>
          </div>

        </div>
        <div class=" textcontent border_line  col-4 col-md-2 text_black indexhovers6">
          <div class="main_lest">
            <div><img class="iconconter" src="../static/indexicon/indexicon66.png" alt=""></div>
            <div>sadsak</div>
          </div>

        </div>
        <!-- <div class="backyellow textcontent border_line main_lest col-6 col-md-2">
          <div><img class="iconconter" src="../static/icon.png" alt=""></div>
          <div>sadsak</div>
        </div> -->
      </div>
      <div class="row  justify-content-between align-items-center rownow titlemargin no-gutters">

        <div class="fontsize32 font_weight_bold">视频案1例</div>
        <div class="fontsize18 text_white">更多</div>
      </div>
      <!-- <div >123</div> -->
      <div class="row  justify-content-around case_main no-gutters rownow" >
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
              <div
                class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                    <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                    <path
                      d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                  </svg>123</div>
                <div>04.25</div>
              </div>
              <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img class="" src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-2 ">
          <div class="case_main_child ">
            <div><img src="../static/10026.jpg" alt=""></div>
            <div class="main_text">视频1新闻</div>
            <div class="main_text_hover">
              <div>视频2新闻</div>
            </div>
          </div>
        </div>


      </div>


      <div class="">
        <div class="row   justify-content-between align-items-center">
          <div class="row align-items-center no-gutters">
            <div class="titlefont ">视频案例</div>
            <div class="Collections_list row ">
              <div :class="lest == 0?'list':''">广告配音</div>
              <div :class="lest == 1?'list':''">广告配音</div>
              <div :class="lest == 2?'list':''">广告配音</div>
              <div :class="lest == 3?'list':''">广告配音</div>
              <div :class="lest == 4?'list':''">广告配音</div>
              <div :class="lest == 5?'list':''">广告配音</div>
              <div :class="lest == 6?'list':''">广告配音</div>


            </div>
          </div>

          <div>更多</div>
        </div>
      </div>



      <div class="rownow" >
        <div class="row justify-content-around  ">


          <div class="col-12 col-md-4  ">
            <div class="yangyin_List">
              <div class="row justify-content-start no-gutters">
                <div>就广告</div>
                <div class="baiqoain_teans">标签推荐</div>
              </div>
              <div class="row justify-content-between  margin_top no-gutters">
                <div class="yangyin_leixin">酒水饮料</div>
                <div class="row justify-content-around  no-gutters">
                  <div class="margin_leftright"><img class="play_icon" src="../static/play_icon.png" alt=""></div>
                  <div><img class="play_icon" src="../static/dian_icon.png" alt=""></div>
                </div>
              </div>
            </div>

          </div>

          <div class="col-12 col-md-4  ">
            <div class="yangyin_List">
              <div class="row justify-content-start no-gutters">
                <div>就广告</div>
                <div class="baiqoain_teans">标签推荐</div>
              </div>
              <div class="row justify-content-between  margin_top no-gutters">
                <div class="yangyin_leixin">酒水饮料</div>
                <div class="row justify-content-around ">
                  <div class="margin_leftright"><img class="play_icon" src="../static/play_icon.png" alt=""></div>
                  <div><img class="play_icon" src="../static/dian_icon.png" alt=""></div>
                </div>
              </div>
            </div>

          </div>
          <div class="col-12 col-md-4  ">
            <div class="yangyin_List">
              <div class="row justify-content-start no-gutters">
                <div>就广告</div>
                <div class="baiqoain_teans">标签推荐</div>
              </div>
              <div class="row justify-content-between  margin_top no-gutters">
                <div class="yangyin_leixin">酒水饮料</div>
                <div class="row justify-content-around ">
                  <div class="margin_leftright"><img class="play_icon" src="../static/play_icon.png" alt=""></div>
                  <div><img class="play_icon" src="../static/dian_icon.png" alt=""></div>
                </div>
              </div>
            </div>

          </div>





        </div>
      </div>


      <div class="">
        <div class="liucgeng_main row align-items-center justify-content-center ">
          <div class="liucgeng_zize">配音流程</div>
        </div>
      </div>

      <div>
        <div class=" row ">
          <img width="100%" src="../static/0221215153005.png" alt="" srcset="">
        </div>
      </div>



      <div class="row  justify-content-between align-items-center">

        <div class="fontsize32 font_weight_bold">视频案例</div>
        <div>更多</div>
      </div>

      <div class="rownow">
        <div class="row align-items-center justify-content-between no-gutters">

          <div class="col-12 col-md-4 ">
            <div class="row mainimg_padd bg-light no-gutters">
              <div class="mainimg_right col-5 border_radius">
                <img width="100%" src="../static/10026.jpg" alt="">
              </div>
              <div class="row no-gutters col-7"
                style="flex-direction: column; justify-content: space-between;padding-left:3%;">
                <div>123</div>
                <div>123</div>
              </div>
            </div>

          </div>
          <div class="col-12 col-md-4 ">
            <div class="row mainimg_padd bg-light no-gutters">
              <div class="mainimg_right col-5 border_radius">
                <img width="100%" src="../static/10026.jpg" alt="">
              </div>
              <div class="row no-gutters col-7"
                style="flex-direction: column; justify-content: space-between;padding-left:3%;">
                <div>123</div>
                <div>123</div>
              </div>
            </div>

          </div>
          <div class="col-12 col-md-4 ">
            <div class="row mainimg_padd bg-light no-gutters">
              <div class="mainimg_right col-5 border_radius">
                <img width="100%" src="../static/10026.jpg" alt="">
              </div>
              <div class="row no-gutters col-7"
                style="flex-direction: column; justify-content: space-between;padding-left:3%;">
                <div>123</div>
                <div>123</div>
              </div>
            </div>

          </div>


          <!-- <div class="col-12 col-md-4 row mainimg_padd bg-light">
            <div class="mainimg_right">
              <img width="150px" src="../static/10026.jpg" alt="">
            </div>
            <div class="row rownone" style="flex-direction: column; justify-content: space-between;">
              <div>123</div>
              <div>123</div>
            </div>
          </div>
          <div class="col-12 col-md-4 row mainimg_padd bg-light">
            <div class="mainimg_right">
              <img width="150px" src="../static/10026.jpg" alt="">
            </div>
            <div class="row rownone" style="flex-direction: column; justify-content: space-between;">
              <div>123</div>
              <div>123</div>
            </div>
          </div> -->


        </div>
      </div>


      <div class="row  justify-content-between align-items-center">

        <div class="titlefont">合作品牌 </div>
        <div>更多</div>
      </div>

      <div style="width:100%;box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.06);padding:26px">
        <div class="container">
          <div class="row  align-items-center justify-content-around no-gutters">
            <div class="col-6 col-md-4 col-xl-2">
              <img width="100%" src="../static/10026.jpg" alt="">
            </div>
            <div class="col-6 col-md-4 col-xl-2">
              <img width="100%" src="../static/10026.jpg" alt="">
            </div>
            <div class="col-6 col-md-4 col-xl-2">
              <img width="100%" src="../static/10026.jpg" alt="">
            </div>

            <div class="col-6 col-md-4 col-xl-2">
              <img width="100%" src="../static/10026.jpg" alt="">
            </div>
            <div class="col-6 col-md-4 col-xl-2">
              <img width="100%" src="../static/10026.jpg" alt="">
            </div>
            <div class="col-6 col-md-4 col-xl-2">
              <img width="100%" src="../static/10026.jpg" alt="">
            </div>
            <div class="col-6 col-md-4 col-xl-2">
              <img width="100%" src="../static/10026.jpg" alt="">
            </div>
            <div class="col-6 col-md-4 col-xl-2">
              <img width="100%" src="../static/10026.jpg" alt="">
            </div>

          </div>
        </div>
      </div>

    </div>





    <!-- <div class="row align-items-center">
      <div class="col-12 col-md-4 textcontent">
        <ul class="list-unstyled text-small">
          <li>
            <img width="100" height="100" src="../static/10026.jpg" alt="">
          </li>
          <li>扫码咨询客服</li>
          <li>欢迎致电1111111</li>
        </ul>
      </div>

    </div> -->
    <div >sda</div>
  </div>
</template>

<script>

  // import api from "";
  // import { typeList } from "../api/api";
  // import { typeList } from '~/api/api'
  // import request from '../utils/request.js'
  export default {
    data() {
      return {
        lest: 0,
        datas:{
          aa:"a"
        },

      cans:1
      }
    },

    created() {

      // this.$axios.get(`console/selectConsole`).then(res=>{
      //   console.log(res)
      // })
      // var datas = {}
      // datas.name = 'NuxtT'
      // this.$request.api.signIn(datas).then(res=>{
      //   console.log(res)
      // });
      // this.$request.api.singfff(datas).then(res=>{
      //   console.log(res)
      // });

      var gattype = {}
      gattype.pid = "123"
      this.$request.api.gattypelist(gattype).then(res => {
        console.log(res)
      });
      this.$request.api.gatchildrenlist(gattype).then(res => {
        console.log(res)
      });
    },

    computed:{



    },
    methods: {

      dianji() {
        console.log("dianji")
        this.$emit('fromChild', 'this cheachild')
      }
    }
  }

</script>

<style>
  .width100 {
    width: 100%;
  }



  .iconconter {
    width: 50px;
    height: 50px;
  }

  .iconconter2 {
    width: 40px;
    height: 40px;
  }

  .main_lest {
    padding: 18% 0;
    /* border: 1px solid #F0F0F0; */
  }

  .mian_selec>div {
    width: 16.6666%;
  }

  .case_main>div {
    /* width: 19%; */
    /* margin: 0 0.5%; */
    text-align: center;
    /* background: red; */
  }

  /* .case_main>div:nth-child(1) {
    margin-left: 0;
  }

  .case_main>div:nth-child(5n) {
    margin-right: 0;
  } */

  /* .case_main>div:nth-child(5n + 1) {
    margin-left: 0;
  } */

  .case_main_child {
    width: calc(100% - 12px);
    position: relative;
    border-radius: 10px;
    margin: 10% auto !important;
    overflow: hidden;
  }

  .case_main_child>div>img {
    width: 100%;
    /* height: 200px; */


  }

  .case_main_child>.main_text {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    color: red;
  }

  .main_text_hover {
    position: absolute;
    width: 100%;
    bottom: -100%;
    height: 100%;
    color: #FFFFFF;
  }

  .main_text_hover_bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
  }

  .z_index6 {
    z-index: 6;
  }

  .case_main_child:hover .main_text_hover {
    bottom: 0;
    /* top: 0; */
    transition: all 2s;
  }

  .main_hover_img {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
  }

  .main_hover_img>img {
    height: 100%;
    margin: auto;
  }

  .Collections_list {
    display: inline-block;
    margin-left: 48px;
  }

  .Collections_list>div {
    margin: 0 12px;
    display: inline-block;
  }

  .list {
    border-bottom: 2px solid red;
  }

  .Collections——main {}

  .yangyin_List {
    padding: 12px 12px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    margin: 12px 0;
  }

  .baiqoain_teans {
    background: #3995F2;
    border-radius: 11px 0px 11px 0px;
    padding: 0 4px !important;
    margin-left: 50px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 24px;
  }

  .yangyin_leixin {
    font-size: 18px;
    font-weight: 400;
    color: #FF6000;
  }

  .liucgeng_main {
    height: 100px;
    background: #131053;
    border-radius: 14px 14px 0px 0px;
  }

  .liucgeng_zize {
    font-size: 40px;
    border-bottom: #FF6000 8px solid;
    color: #F0F0F0;
    padding: 0 16px;
    line-height: 36px;
  }

  .main_lest2 {
    padding: 0;
  }

  .mainimg_padd {
    width: calc(100% - 22px);
    margin: 0 auto;
    padding: 4%;
    box-sizing: border-box;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.06);
    border-radius: 7px 7px 7px 7px;
  }

  .mainimg_right {
    /* width: 40%; */
    /* margin-right: 12px; */
  }


  .indexhovers1 {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
  }

  .indexhovers1:hover {
    background: #FF6000;
    color: #fff;
    transition: 0.6s all ease-out;

  }

  .indexhovers1:hover>div>div>img {
    content: url(../static/indexicon/indexicon1.png);
    transition: 0.5s all ease-out;
  }

  .indexhovers2:hover {
    background: #FF6000;
    color: #fff;
    transition: 0.6s all ease-out;

  }

  .indexhovers2:hover>div>div>img {
    content: url(../static/indexicon/indexicon2.png);
    transition: 0.5s all ease-out;
  }

  .indexhovers3:hover {
    background: #FF6000;
    color: #fff;
    transition: 0.6s all ease-out;

  }

  .indexhovers3:hover>div>div>img {
    content: url(../static/indexicon/indexicon3.png);
    transition: 0.5s all ease-out;
  }

  .indexhovers4:hover {
    background: #FF6000;
    color: #fff;
    transition: 0.6s all ease-out;

  }

  .indexhovers4:hover>div>div>img {
    content: url(../static/indexicon/indexicon4.png);
    transition: 0.5s all ease-out;
  }

  .indexhovers5:hover {
    background: #FF6000;
    color: #fff;
    transition: 0.6s all ease-out;

  }

  .indexhovers5:hover>div>div>img {
    content: url(../static/indexicon/indexicon5.png);
    transition: 0.5s all ease-out;
  }

  .indexhovers6:hover {
    background: #FF6000;
    color: #fff;
    transition: 0.6s all ease-out;

  }

  .indexhovers6:hover>div>div>img {
    content: url(../static/indexicon/indexicon6.png);
    transition: 0.5s all ease-out;

  }

  .zoomImage {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
  }

  .rowcaijiankuan {
    width: calc(100% - 10%);
    margin: 0 auto;
    margin-left: 5%;
    font-size: 12px;
  }

  .position_ab {
    position: absolute;
  }

  @media (max-width: 768px) {
    .Collections_list {
      margin-left: 0px;

    }
  }
  .margin_top{
  margin-top: 8px;
}
.play_icon{
  width: 24px;
  height: 24px;
}
.margin_leftright{
  margin: 0 22px;
}
</style>
